<template>
  <div>
    <!-- IndexPage.vue 作为用户登录、列表、注册组件的父组件 (可以简单的理解为 父div) -->
    <div class="page-select">
      <div class="page-content">
        <input
          type="radio"
          id="loginPage"
          :value="loginPage"
          v-model="select"
        />
        <label for="loginPage">登录</label>
      </div>

      <div class="page-content">
        <input
          type="radio"
          id="registPage"
          :value="registPage"
          v-model="select"
        />
        <label for="registPage">注册</label>
      </div>

      <div class="page-content">
        <input
          type="radio"
          id="userListPage"
          :value="userListPage"
          v-model="select"
        />
        <label for="userListPage">用户列表</label>
      </div>
    </div>

    <!-- 使用 v-if 或 v-show 都可以实现-->
    <LoginPage v-if="select === loginPage" />
    <UserRegisterPage v-else-if="select === registPage" />
    <UserListPage v-else="select === userListPage" />

    <!-- v-show的方式 当前的场景推荐使用 v-show-->
    <!-- 
    <LoginPage v-show="select === loginPage" />
    <UserRegisterPage v-show="select === registPage" />
    <UserListPage v-show="select === userListPage" /> 
    -->
  </div>
</template>
<script setup>
import LoginPage from "./LoginPage.vue";
import UserListPage from "./user/UserListPage.vue";
import UserRegisterPage from "./user/UserRegisterPage.vue";

// 当文件名为 index.js 时，可以简写为 . 这需要构建工具支持。
// 将程序中的字符串，如本例中的 "loginPage", "registPage", "userListPage"，引入定义为js的变量的值
// 在js中去引用变量而非手写的字符串，可以利用js语法来减少字符串拼写错误引起的逻辑错误
// 尤其是字符串出现多次时的场景，使用js变量的好处就更加明显。
import { tagSelected, loginPage, registPage, userListPage } from ".";

// 1. 控制登录和注册(登录后)的显示和隐藏
// 2. 页面上radio控件，使用v-model绑定此数据/响应式变量，实现响应式数据同步
// 3. 组件的变量服务于当前的组件实例，因此模版绑定的变量需要在组件内声明。
// 4. 为 select 设定初始值 : 来自全局响应式对象的引用。
const select = tagSelected;
</script>

<style scoped>
.page-select {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px;
}

.page-select .page-content {
  margin: 0 8px;
  cursor: pointer;
}

label {
  cursor: pointer; /* 设置光标为手型 */
}
</style>
